"use client";
import { type FC, useEffect, useRef } from "react";
import { useSetState } from "ahooks";
import cookie from "js-cookie";
import type { MenuProps } from "antd";
import { Dropdown } from "antd";
import classNames from "classnames";
import Login from "../Login";
import Confirm from "../Confirm";
import styles from "./index.module.scss";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { useCommonStore } from "@/src/providers/common-store-provider";

interface IndexProps {
  current?: string;
  style?: React.CSSProperties;
}

const Index: FC<IndexProps> = ({ current, style }) => {
  const pathname = usePathname();
  const [state, setState] = useSetState({
    scrollTop: 0,
    showDropDown: false,
  });
  const { isLogin, showLogin, setShowLogin, setIsLogin, isMobile } =
    useCommonStore((state) => state);
  const scrollTopRef = useRef(0);
  const scroll = () => {
    if (window.scrollY > 0 && scrollTopRef.current === 0) {
      scrollTopRef.current = window.scrollY;
      setState({
        scrollTop: window.scrollY,
      });
    }
    if (window.scrollY === 0) {
      scrollTopRef.current = window.scrollY;
      setState({
        scrollTop: window.scrollY,
      });
    }
  };
  useEffect(() => {
    window.addEventListener("scroll", scroll);
    return () => {
      window.removeEventListener("scroll", scroll);
    };
  }, []);

  const items: MenuProps["items"] = [
    {
      key: "1",
      label: (
        <div
          onClick={() => {
            window.open("/my");
          }}
        >
          我的账户
        </div>
      ),
    },
    {
      key: "2",
      label: (
        <div
          onClick={() => {
            window.open("/my/cv");
          }}
        >
          我的简历
        </div>
      ),
    },

    {
      key: "3",
      label: (
        <div
          onClick={() => {
            Confirm({
              content: "确认退出？",
              onOk: async () => {
                cookie.remove("baijie_token");
                // setState({
                //   user: null
                // })
                setIsLogin(false);
              },
            });
          }}
        >
          退出登录
        </div>
      ),
    },
  ];

  const LoginArea = (props) => {
    if (isMobile) {
      return (
        <div style={{ paddingRight: 10, paddingLeft: 10 }} {...props}>
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            onClick={() => {
              if (!isLogin) {
                setShowLogin(true);
              }
            }}
          >
            <path
              d="M788.8 288c0 153.6-123.2 276.8-276.8 276.8S235.2 441.6 235.2 288 358.4 12.8 512 12.8 788.8 134.4 788.8 288zM864 1012.8H136c-32 0-46.4-24-46.4-56 0-190.4 139.2-340.8 324.8-340.8h171.2c185.6 0 347.2 152 347.2 342.4v-3.2c1.6 32-36.8 56-68.8 57.6z"
              fill="#959595"
            ></path>
          </svg>
        </div>
      );
    } else {
      if (isLogin) {
        return (
          <div
            {...props}
            style={{
              fontSize: "14px",
              cursor: "pointer",
              display: "flex",
              alignItems: "center",
            }}
          >
            <div
              style={{
                width: "30px",
                height: "30px",
                borderRadius: "50%",
                background: "#5659fe",
                marginRight: "10px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                color: "#fff",
              }}
            >
              S
            </div>
            个人中心
          </div>
        );
      } else {
        return (
          <div
            className={styles.loginBtn}
            onClick={() => {
              setShowLogin(true);
            }}
          >
            登录 / 注册
          </div>
        );
      }
    }
  };
  return (
    <>
      <div
        className={classNames(
          styles.header,
          state.scrollTop > 0 ? styles.shadow : ""
        )}
        style={style}
      >
        <div className={styles.content}>
          <Link
            scroll={false}
            className={classNames(styles.logo, styles.hide)}
            href="/"
          >
            百捷简历
          </Link>

          <div className={styles.menus}>
            <Link
              scroll={false}
              className={classNames(
                styles.menu,
                pathname === "/" ? styles.active : ""
              )}
              href="/"
            >
              首页
            </Link>
            <Link
              scroll={false}
              className={classNames(
                styles.menu,
                styles.myResume,
                pathname?.indexOf("muban") !== -1 ? styles.active : ""
              )}
              href="/muban/list"
            >
              简历模板
            </Link>
            <Link
              scroll={false}
              className={classNames(
                styles.menu,
                pathname?.indexOf("word") !== -1 ? styles.active : ""
              )}
              href="/word"
            >
              Word模板
            </Link>
            <Link
              scroll={false}
              className={classNames(
                styles.menu,
                pathname?.indexOf("recommend") !== -1 ? styles.active : ""
              )}
              href="/recommend/1"
            >
              求职攻略
            </Link>
            <Link
              scroll={false}
              className={classNames(
                styles.menu,
                pathname?.indexOf("fanwen") !== -1 ? styles.active : ""
              )}
              href="/fanwen/1"
            >
              简历范文
            </Link>
          </div>

          <div className={styles.loginArea}>
            {isLogin ? (
              <div style={{ display: "flex", alignItems: "center" }}>
                <div onClick={() => {}}>
                  <Dropdown menu={{ items }} placement="bottomRight">
                    <LoginArea />
                    {/* <div>sdf</div> */}
                  </Dropdown>
                </div>
              </div>
            ) : (
              <LoginArea />
            )}
          </div>
          {/* )} */}
        </div>
      </div>
      {showLogin ? <Login></Login> : null}
    </>
  );
};

export default Index;
